<template>
  <div class="relative rounded-32rpx">
    <div class="absolute left-86rpx top-0">
      <image
        :src="`${cdnUrl}/imgs/mine/coupon/top.png${imgVersion}`"
        mode="scaleToFill"
        class="h-68rpx w-372rpx"
      />
    </div>
    <div class="rounded-32rpx from-hex-FFF8EC to-hex-FFFFFF bg-gradient-to-b py-110rpx">
      <div v-for="item in props.dataList" class="relative mb-10rpx box-border px-38rpx">
        <div>
          <image
            :src="`${cdnUrl}/imgs/mine/coupon/per.png${imgVersion}`"
            mode="scaleToFill"
            class="h-152rpx w-486rpx"
          />
        </div>
        <div class="absolute left-78rpx right-0 top-18rpx flex">
          <div class="mr-50rpx text-80rpx font-bold text-hex-FF4F47">50</div>
          <div>
            <div class="mb-4rpx text-32rpx font-bold text-hex-333333">优惠券</div>
            <div class="text-20rpx text-hex-999999">满300可用</div>
            <div class="text-20rpx text-hex-999999">2023-4-12 12:00到期</div>
          </div>
        </div>
      </div>
    </div>
    <div class="absolute z-9 -bottom-98rpx -left-60rpx -right-60rpx" @click="closeDialog">
      <image
        :src="`${cdnUrl}/imgs/mine/coupon/button.png${imgVersion}`"
        mode="widthFix"
        class="w-100%"
      />
    </div>
    <div class="absolute -bottom-78rpx -left-30rpx -right-30rpx -z-9">
      <image
        :src="`${cdnUrl}/imgs/mine/coupon/bg.png${imgVersion}`"
        mode="widthFix"
        class="w-100%"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps<Props>()
const emits = defineEmits(['close'])
interface Props {
  dataList: any
}
const closeDialog = () => {
  emits('close')
}
onMounted(() => {
  console.log(props.dataList)
})
</script>
